<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 
    1.Vue中常用的按键别名：
      回车 enter Enter 真正的名字
      删除 delete（捕获“删除”和“退格”键）
      退出 esc
      空格 space
      换行 tab （特殊，必须配合keydown去使用）
      上 up
      下 down
      左 left
      右 right
    2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为ketab-case（短横线命名）ps：caps-lock
    3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta
      (1). 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。（如果只想ctrl+y一起使用：@keyup.ctrl.y="fn"）
      (2). 配合keydown使用：正常触发事件。
    4. 也可以使用keyCode去指定具体的按键（不推荐）
    5. Vue.config.keyCodes.自定义键名 = 键码. 可以去定制按键别名
   -->
  <div id="root">
    <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
  </div>
  <script>
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示。
    Vue.config.keyCodes.huiche = 13 // 定义一个别名 @keyup.13="showInfo"

    const vm = new Vue({
      el: "#root",
      data: {
        name: '名字'
      },
      methods: {
        showInfo(e) {
          console.log(e.key, e.keyCode);
          // if(e.keyCode !== 13) return
          console.log(e.target.value)
        }
      }
    })
  </script>
</body>
</html>